<!DOCTYPE html>
<html lang="zh" ng-app="app" ng-controller="mainCtrl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>generate SQL</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/abn_tree.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="container">
        <div class="col-md-3">
            <div class="panel panel-default treeList">
                <div class="panel-heading">表及字段</div>
                <div class="panel-body">
                    <abn-tree tree-data="myData" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2"></abn-tree>
                    
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="col-md-12">
                <div class="panel panel-default"  ng-drop="true" ng-drop-success="onDropTable($data,$event)">
                    <div class="panel-heading">数据表及关联 <span class="glyphicon glyphicon-menu-hamburger to-right" ng-click="showModel('tableAssociation')"></span></div>
                    <div class="panel-body">
                        <p class="lead">此处展示与编辑表格信息</p>
                        <div class="col-md-3" ng-repeat="data in tableGroup track by $index">
                            <div class="input-group input-group-sm">
                                <input type="text" ng-disabled="true" class="form-control" title="{{data.label}}" value="{{data.label}}">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="data">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <br>
                        <hr>
                        <p class="lead">此处展示表格关联信息</p>
                        <table class="table association">
                            <thead>
                                <th>表关联</th>
                                <th>字段关联</th>
                                <th>操作</th>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default" ng-drop="true" ng-drop-success="onDropResult($data,$event)">
                    <div class="panel-heading">显示结果字段关联 <span class="glyphicon to-right" ng-class="{'glyphicon-resize-small':resultFull,'glyphicon-resize-full':!resultFull}" ng-click="resizeFrame('result')"></span></div>
                    <div class="panel-body" ng-class="{'resultFull':resultFull, 'resultSmall':!resultFull}">
                        <div class="col-md-3" ng-repeat="data in resultGroup">
                            <div class="input-group input-group-sm">
                                <input type="text" ng-disabled="true" class="form-control" title="{{data.label}}" value="{{data.label}}">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="showModel('resultData',data,$index)">
                                        <span class="glyphicon glyphicon-pencil"></span>
                                    </button>
                                    <button type="button" class="btn btn-default" ng-click="data">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default"  ng-drop="true" ng-drop-success="onDropSearch($data,$event)">
                    <div class="panel-heading">
                        查询条件
                        <span class="glyphicon to-right" ng-class="{'glyphicon-resize-small':searchFull,'glyphicon-resize-full':!searchFull}" ng-click="resizeFrame('search')"></span> 
                        <span class="glyphicon glyphicon-list to-right"></span>
                    </div>
                    <div class="panel-body"  ng-class="{'searchFull':searchFull,'searchSmall':!searchFull}">
                        <div class="col-md-3" ng-repeat="data in searchGroup">
                            <div class="input-group input-group-sm">
                                <input type="text" ng-disabled="true" class="form-control" title="{{data.label}}" value="{{data.label}}">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-pencil"></span>
                                    </button>
                                    <button type="button" class="btn btn-default" ng-click="data">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default" ng-drop="true" ng-drop-success="onDropFilter($data,$event)">
                    <div class="panel-heading">
                        分组筛选条件 
                        <span class="glyphicon to-right"  ng-class="{'glyphicon-resize-small':filterFull,'glyphicon-resize-full':!filterFull}" ng-click="resizeFrame('filter')"></span>
                        <span class="glyphicon glyphicon-list to-right"></span>
                        
                    </div>
                    <div class="panel-body" ng-class="{'filterFull':filterFull,'filterSmall':!filterFull}">
                        <div class="col-md-3" ng-repeat="data in filterGroup">
                            <div class="input-group input-group-sm">
                                <input type="text" ng-disabled="true" class="form-control" title="{{data.label}}" value="{{data.label}}">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-pencil"></span>
                                    </button>
                                    <button type="button" class="btn btn-default" ng-click="data">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" >
                <form id="table" ng-if="model.table">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">操作<span ng-bind="model.title | title"></span></h4>
                    </div>
                    <div class="modal-body">
                        <div ng-repeat="data in tableGroup">
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label for="">数据表{{$index+1}}</label>
                                </div>
                                <div class="col-md-5">
                                    <select  ng-options="op.value as op.key for op in tableSelect" name="table{{$index}}" ng-model="aaa" class="form-control" ng-change="changeFileds(aaa,$index)">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12" ng-if="$index != tableGroup.length - 1">
                                <div class="col-md-3">
                                    <label for="">关联关系</label>
                                </div>
                                <div class="col-md-5">
                                    <select ng-model="table1" class="form-control" name="joinType{{$index}}">
                                        <option value="">请选择</option>
                                        <option value="JOIN">JOIN</option>
                                        <option value="LEFT JOIN">LEFT JOIN</option>
                                        <option value="RIGHT JOIN">RIGHT JOIN</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="data in fileds">
                            <div ng-repeat="data1 in data.fileds">
                                <div class="col-md-12">
                                    <div class="col-md-3">
                                        <label for="">数据表{{$index}}字段</label>
                                    </div>
                                    <div class="col-md-5">
                                        <select  ng-model="table1" ng-options="op.value as op.name for op in data1" class="form-control table{{$index}}" name="filed{{$index}}">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                        </div> 
                        <div class="col-md-12">
                            <div class="col-md-3 text-center">
                                <button class="btn btn-primary">添加</button>
                            </div>
                            <div class="col-md-3 text-center" ng-if="fileds > 1 ">
                                <button class="btn btn-danger">删除</button>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="tableSave()">保存</button>
                    </div>
                </form>
                <form name="failed" novalidate ng-if="model.filed">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">操作<span ng-bind="model.title | title"></span></h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12">
                            <div class="col-md-2">
                                <label for="">字段</label>
                            </div>
                            <div class="col-md-5">
                                <input type="text" ng-disabled="true" ng-model="modelFiled.branch.value" class="formcontrol">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-2">
                                <label for="">字段名称</label>
                            </div>
                            <div class="col-md-5">
                                <input type="text" ng-disabled="true" ng-model="modelFiled.branch.name" class="formcontrol">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-2">
                                <label for="">常用函数</label>
                            </div>
                            <div class="col-md-5">
                                <select ng-model="modelFiled.branch.commonFun" class="form-control" name="commonFun">
                                    <option value="">请选择</option>
                                    <option value="Distinct">Distinct</option>
                                    <option value="YEAR">YEAR</option>
                                    <option value="MONTH">MONTH</option>
                                    <option value="DAYOFMONTH">DAYOFMONTH</option>
                                    <option value="HOUR">HOUR</option>
                                    <option value="MINUTE">MINUTE</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-2">
                                <label for="">聚合函数</label>
                            </div>
                            <div class="col-md-5">
                                <select ng-model="modelFiled.branch.aggregateFun" class="form-control" name="commonFun">
                                    <option value="">请选择</option>
                                    <option value="Count">Count</option>
                                    <option value="Sum">Sum</option>
                                    <option value="Avg">Avg</option>
                                    <option value="Min">Min</option>
                                    <option value="Max">Max</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-2">
                                <label for="">排序</label>
                            </div>
                            <div class="col-md-5">
                                <select ng-model="modelFiled.branch.sort" class="form-control" name="commonFun">
                                    <option value="">请选择</option>
                                    <option value="ASC">ASC</option>
                                    <option value="DESC">DESC</option>
                                </select>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="saveFiled(modelFiled)">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ngDraggable.js"></script>
<script src="js/abn_tree_directive.js"></script>
<script src="js/app.js"></script>
<script src="js/service.js"></script>
<script src="js/filter.js"></script>
</html>